<template>
  <a-select v-model:value="secretLevel" style="width: 100%" v-bind="attrs" @change="(value) => handleChange(value)" @clear="handleClear">
    <a-select-option v-for="item in secretLevelList" :key="item.sysLookupTlId" :value="item.lookupCode" :label="item.lookupName">
      <span :style="{ color: item.bgColor }">{{ item.lookupName }}</span>
    </a-select-option>
  </a-select>
</template>

<script lang="ts" setup>
const attrs = useAttrs();
const { proxy } = getCurrentInstance();
const emit = defineEmits(['update:value', 'change', 'input', 'clear']);
const props = defineProps({
  value: { type: [String, Array], default: null }
});
const secretLevelList = ref([]);
const secretLevel = ref<any>(props.value);

watch(
  () => props.value,
  (newValue) => {
    secretLevel.value = newValue;
  }
);
onBeforeMount(() => {
  getUserFileSecretList();
});
/** 获取当前用户对应的文档密级 */
function getUserFileSecretList() {
  proxy.$getUserFileSecretLevelList((result) => {
    secretLevelList.value = result;
  });
}
/** 密级选择 */
function handleChange(value) {
  secretLevel.value = value;
  emit('update:value', value);
  emit('change', value);
  emit('input', value);
}
/** 清空密级 */
function handleClear() {
  secretLevel.value = null;
  emit('update:value', null);
  emit('change', null);
  emit('clear');
}
</script>

<style scoped>
.secret-select {
  margin: 10px 0;
}

.secret-select label {
  margin-right: 10px;
}

.secret-select select {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>